<template>
    <div class="container">
        <el-form ref="passwordForm" :model="passwordForm" label-width="100px" :rules="rules">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input v-model="passwordForm.oldPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="passwordForm.newPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="checkNewPassword">
                <el-input v-model="passwordForm.checkNewPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data (){
        // 自定义校验规则
        var validatePass = (rule, value, callback) => {
            // 判断两次输入的新密码是否一致
            if(value !== this.passwordForm.newPassword){
                callback(new Error('两次输入的密码不一致'));
            }else{
                callback();
            }
        };
        return {
            passwordForm: {
                oldPassword: '',
                newPassword: '',
                checkNewPassword: ''
            },
            rules: {
                oldPassword: [
                    {required: true, message: '请输入旧密码'}
                ],
                newPassword: [
                    {required: true, message: '请输入新密码'}
                ],
                checkNewPassword: [
                    {required: true, message: '请确认新密码'},
                    {validator: validatePass}
                ]
            }
        }
    },
    methods: {
      submitForm() {
        this.$refs['passwordForm'].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.passwordForm.resetFields();
      }
    }
}
</script>


<style lang="less" scoped>
.container{
    width: 50%;
    margin: 0 auto;
}
</style>